<template>
	<view class="recommend-box">
		<!-- <u-navbar :is-back="false" title="" v-if="1" :border-bottom="false"></u-navbar> -->
		<view class="h88 flex align-center justify-between pl30 pr30 mt44">
			<view class="" @click="showPropText = true"><image src="../../static/img/sear.png" class="w36 h36" mode=""></image></view>
			<view class="f36" style="color: #000000; font-weight: 700;">推荐</view>
			<view class=""></view>
		</view>
		<view class="recommend-center">
			<view class="recommend-header pl26">
				<view class="flex align-center pt58 ">
					<image src="../../static/img.jpg" class="w120 h120 r60" mode=""></image>

					<view class="ml30">
						<view class="f30 flex align-center">
							<view class="" style="font-weight: 700;">酱酱</view>
							<view class="ml26 f20">
								<text style="font-weight: bold;color: #000000;" class="f30"></text>
								<i class="ml25 cuIcon-male f20" style="color: #40C6A8; font-weight: 700;"></i>
								<!-- <i style="color:#FF2B8A; font-weight: 700;" class="cuIcon-female ml25 f20" ></i> -->
								<text class="ml6" style="color: #666666;">20</text>
							</view>
						</view>
						<view class="f20 mt20 flex align-center">
							<view class="w70 h40 r20 text-center lh38" style="border:2rpx solid #40C6A8; color: #40C6A8;">公爵</view>
							<view class="">
								<!-- 会员等级 -1普通用户 0 普通会员 1普通VIP 2 高级VIP 3 钻石VIP 4至尊VIP -->
								<!-- <image v-if="item.menberLabel == -1" src="../../../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
								<image v-if="item.menberLabel == 0" src="../../../../static/vip/huiyuan.png" class="w110 h30 ml36" mode=""></image>
								<image v-if="item.menberLabel == 1" src="../../../../static/vip/putong.png" class="w110 h30 ml36" mode=""></image>
								<image v-if="item.menberLabel == 2" src="../../../../static/vip/gaoji.png" class="w110 h30 ml36" mode=""></image>
								<image v-if="item.menberLabel == 3" src="../../../../static/vip/zs.png" class="w110 h30 ml36" mode=""></image>
								<image v-if="item.menberLabel == 4" src="../../../../static/vip/zhizun.png" class="w110 h30 ml36" mode=""></image> -->
							</view>
						</view>
						<view class="mt20 f26">
							<i class="cuIcon-title" style="#40C6A8"></i>
							在线 18km 成都市/新都区
						</view>
					</view>
				</view>

				<view class="pt40 mb31"><u-swiper height="460" :list="swiperList"></u-swiper></view>

				<view class="">
					<view class="flex align-center mb20">
						<view class="flex align-center f26 w300">
							<image src="../../static/icon/sg.png" class="w36 h36" mode=""></image>
							<view class="ml18" style="color: #666;">
								身 高:
								<text style="margin-left: 10rpx;">184cm</text>
							</view>
						</view>
						<view class="flex align-center f26 w300">
							<image src="../../static/icon/tz.png" class="w36 h36" mode=""></image>
							<view class="ml18" style="color: #666;">
								体 重：
								<text style="margin-left: 10rpx;">184cm</text>
							</view>
						</view>
					</view>

					<view class="flex align-center mb20">
						<view class="flex align-center f26 w300 ">
							<image src="../../static/icon/dq.png" class="w36 h36" mode=""></image>
							<view class="ml18" style="color: #666;">
								地 区：
								<text style="margin-left: 10rpx;">上海</text>
							</view>
						</view>
						<view class="flex align-center f26 w300 ">
							<image src="../../static/icon/qc.png" class="w36 h36" mode=""></image>
							<view class="ml18" style="color: #666;">
								座 驾：
								<text style="margin-left: 10rpx;">宝马</text>
							</view>
						</view>
					</view>

					<view class="flex align-center mb20">
						<view class="flex align-center f26 w300 ">
							<image src="../../static/icon/xq.png" class="w36 h36" mode=""></image>
							<view class="ml18" style="color: #666;">
								爱 好：
								<text style="margin-left: 10rpx;">打游戏,健身</text>
							</view>
						</view>
						<view class="flex align-center f26 w300 ">
							<image src="../../static/icon/yh.png" class="w36 h36" mode=""></image>
							<view class="ml18" style="color: #666;">
								约会地：
								<text style="margin-left: 10rpx;">上海</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="flex justify-between align-center mt80 pl45 pr45">
				<view class="bgc"><text class="cuIcon-back" style="color: #000000;"></text></view>
				<button type="default" class="cu-btn w380 h90 r45 f30" style="background-color: #000000;color: #FFFFFF;">申请约会</button>
				<view class="bgc"><text class="cuIcon-right" style="color: #000000;"></text></view>
			</view>
		</view>

		<u-popup v-model="showPropText" border-radius="30" mode="bottom">
			<view class="pt50 pl30">
				<view class="">
					<view class="flex align-center">
						<i class="cuIcon-title f40 mr21"></i>
						<text>邀约性别</text>
					</view>
					<view class="ww100 flex align-center  flex-wrap pl40">
						<view class="bgc-border" v-for="(item, index) in sexList" :key="index" @click="gender(index)" :class="black == index ? 'bgc' : ''">{{ item.text }}</view>
					</view>
				</view>

				<view class="flex justify-center mb50 mt50">
					<button type="default" class="cu-btn w320 h80 r40 f30 " style="background-color: #000000;color: #FFFFFF;">确定</button>
				</view>
			</view>
		</u-popup>

		<u-tabbar active-color="#000000" inactive-color="#999999" icon-size="48" height="110" @change="changePages" v-model="current" :list="list"></u-tabbar>
		<yy-tip :isCustom="false" />

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					iconPath: '../../static/tab/home.png',
					selectedIconPath: '../../static/tab/home-sele.png',
					text: '广场',
					customIcon: false,
					pagePath: '/pages/tab/index'
				},
				// {
				// 	iconPath: '../../static/tab/1v1.png',
				// 	selectedIconPath: '../../static/tab/1v1-sele.png',
				// 	text: '1v1',
				// 	customIcon: false,
				// 	pagePath: '/pages/tab/covey'
				// },
				// {
				// 	iconPath: '../../static/tab/good.png',
				// 	selectedIconPath: '../../static/tab/good.png',
				// 	text: '推荐',
				// 	midButton: true,
				// 	customIcon: false,
				// 	pagePath: '/pages/tab/recommend'
				// },
				{
					iconPath: '../../static/tab/tuij.png',
					selectedIconPath: '../../static/tab/tuij-sele.png',
					text: '推荐',
					customIcon: false,
					pagePath: '/pages/tab/recommend'
				},
				{
					iconPath: '../../static/tab/chat.png',
					selectedIconPath: '../../static/tab/chat-sele.png',
					text: '聊天',
					customIcon: false,
					pagePath: '/pages/tab/chat'
				},
				{
					iconPath: '../../static/tab/me.png',
					selectedIconPath: '../../static/tab/me-sele.png',
					text: '我的',
					isDot: false,
					customIcon: false,
					pagePath: '/pages/tab/me'
				}
			],
			current: 0,
			swiperList: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			],
			showPropText: false,
			sexList: [
				{
					text: '男'
				},
				{
					text: '女'
				},
				{
					text: '不限'
				}
			],
			black: 0
		};
	},
	onShow() {
		this.userList();
	},
	onLoad(e) {},
	methods: {
		changePages(e, index) {
			console.log('e==>', e, index);
			// if (e == 0) {
			// 	this.l.to('/pages/tab/index');
			// } else if (e == 1) {
			// 	this.l.to('/pages/tab/covey');
			// } else if (e == 2) {
			// 	this.l.to('/pages/tab/recommend');
			// } else if (e == 3) {
			// 	this.l.to('/pages/tab/chat');
			// } else {
			// 	this.l.to('/pages/tab/me');
			// }
			
			if (e == 0) {
				this.l.to('/pages/tab/index');
			} else if (e == 1) {
				this.l.to('/pages/tab/recommend');
			} else if (e == 2) {
				this.l.to('/pages/tab/chat');
			} else if (e == 3) {
				this.l.to('/pages/tab/me');
			} 
		},

		gender(index) {
			this.black = index;
		},

		async userList() {
			const res = await this.$u.get('api/user/recommend');
			console.log('res==>', res);
		}
	}
};
</script>

<style lang="scss" scoped>
.recommend-box {
	.recommend-center {
		padding: 30rpx;

		.recommend-header {
			height: 914rpx;
			background: #ffffff;
			box-shadow: 0px 0px 14rpx 0px rgba(255, 0, 234, 0.08);
			border-radius: 20rpx;
		}

		.bgc {
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			background: #fcf7fc;
			border-radius: 50%;
		}
	}

	.bgc-border {
		padding: 19rpx 47rpx;
		border: 2rpx solid #f0f0f0;
		border-radius: 40rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
		font-size: 26rpx;
		color: #666666;
	}

	.bgc {
		color: #ffffff;
		background-color: #000000;
	}
}
</style>
